<template>
  <div class=" white-module">
    <div class="troops">
      <img src="@/assets/title_bg.png"/>
      <div class="c"><span>参赛代表队</span> {{userInfo ? userInfo.team.teamName : ''}} <span>领队</span> {{userInfo ? userInfo.leader.realName:''}}</div>
    </div>

    <el-row class="search-module">
      <el-col class="search-left" :span="21">
        <div class="item">
          <span class="text">老师：</span>
          <el-input v-model="dataForm.realName"></el-input>
        </div>
      </el-col>

      <el-col class="right-btn" :span="3">
        <el-button type="primary" @click="query">查询</el-button>
        <el-button type="default" @click="reset">重置</el-button>
      </el-col>
    </el-row>

    <div class="title">
      <div class="left">
        指导老师
      </div>
      <!--
      <div class="right">
        (您有赛事<span>获得晋级资格</span>，请前往报名记录查)<el-button @click="handleEnrollList" type="text">查看报名记录</el-button>
      </div>
      -->
    </div>

    <div class="global-table">
      <el-table
          :data="dataList"
          :header-cell-style="{
            background: '#F5F7FA',
            color: '#333',
          }"
          style="width: 100%"
      >
        <el-table-column prop="real_name" label="姓名" >
          <template #default="scope">
            <span class="table-text-btn" type="text" @click="toDetail(scope.row.id)" size="small"> {{scope.row.real_name}} </span>
          </template>
        </el-table-column>
        <el-table-column prop="company" label="单位" />
        <el-table-column prop="create_date" label="注册时间" />
        <el-table-column prop="create_date" label="获奖证书" >
          <template #default="scope">
            <span class="table-text-btn" type="text" @click="toCertificateList(scope.row.real_name, scope.row.id_card)" size="small"> 查看 </span>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="200">
          <template #default="scope">
            <span  class="table-text-btn"  @click="handleDelete(scope.row.teamUserId)"> 解除绑定 </span>
          </template>
        </el-table-column>

      </el-table>
    </div>

    <el-row class="global-pagination">
      <el-col :span="8" class="total"> 共搜索 {{total}} 条数据 </el-col>
      <el-col :span="16">
        <el-pagination
            background
            layout="  prev, pager, next, jumper"
            :total="total"
            :page-size="10"
            :current-page="page"
            :small="false"
            :disabled="false"
            @size-change="query"
            @current-change="pageCurrentChangeHandle"
        />
      </el-col>
    </el-row>
  </div>
  <el-dialog
      v-model="dialogVisible" :show-close="false"
      width="400px"
  >
    <div class="confirm-dialog">
      <div class="image"><img src="@/assets/common/hint_red.png"/></div>
      <div class="text">是否确认解除绑定？</div>
      <div class="btns">
        <el-button type="primary" @click="handleConfirm">确认</el-button>

        <el-button @click="dialogVisible = false">取消</el-button>
      </div>
    </div>

  </el-dialog>
</template>

<script lang="ts" >
import {ref,toRefs, reactive, defineComponent} from "vue";
import listService from "@/utils/listService";
import router from "@/router";
import baseService from "@/service/baseService";
import {ElMessage} from "element-plus";
import {getCache, setCache} from "@/utils/cache";



export default defineComponent({
  setup() {


    const state = reactive({
      getDataListURL: "/front/fast/user/userList/page?pageSize=10&type=3",
      getDataListIsPage: true,
      deleteURL: "/pay/order",
      deleteIsBatch: true,
      dataForm: {
        id: null,
        status: "",
        name: ""
      }
    });
    return { ...listService(state), ...toRefs(state) };
  },

  data() {
    return {

      isCollapse:1,
      dialogVisible:false,
      isNavCollapse:false,
      showDialogFlag: false,
      evaluationDialogFlag: false,
      updateForm: {
        id: null,
        schoolName: '',
        evaluation: ''
      },
      formLabelWidth: '120px',
      userInfo: ""
    };
  },

  mounted() {
    this.userInfo = getCache('userInfo', { isSessionStorage: true }, {})
  },

  methods: {
    handleEnroll : () => {
      router.push("/enroll/matchEnroll");
    },
    handleEnrollList(){
      router.push("/enroll/enrollList");
    },
    handleCollapse(){
      if (this.isCollapse == 1) {
        this.isCollapse= 2;
        this.isNavCollapse = false;
      } else {
        this.isCollapse = 1;
        setTimeout(() => {
          this.isNavCollapse = true;
        }, 130);
      }
    },



    /**
     * 解除绑定
     */
    handleDelete(id: any) {
      this.dialogVisible = true;
      this.dataForm.id = id;
    },

    /**
     * 确定解除绑定
     */
    handleConfirm() {
      baseService
          .post("/front/spteamuser/delete", {id: this.dataForm.id})
          .then((res) => {
                if (res.code === 0) {
                  this.query();
                  ElMessage.success('解除绑定成功');
                }else{
                  ElMessage.error(res.msg);
                }
                this.dialogVisible = false;
              }
          );
    },
    toDetail(id:any){
      router.push({ path: "/info", query: { id: id } });
    },
    toCertificateList(realName:any, idCard:any){
      const certificate = {
        realName: realName,
        idCard: idCard
      };
      setCache("certificate", certificate, true);
      let routeData = router.resolve("/cerTeacherList");
      window.open(routeData.href, '_blank');
    },
    reset: function () {
      if (this.dataForm) {

      }
    },

  }
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped >
.white-module {
  padding-top: 20px;
}

.troops {
  position: relative;
  margin: 0px 0px 10px 20px;

  img {
    width: 579px;
  }

  .c {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 532px;
    line-height: 54px;
    border-radius: 6px;

    span {
      font-size: 16px;
      font-weight: $font-weight-bold;
      margin-left: 24px;
      margin-right: 11px
    }

  ;

    span:nth-child(3) {
      margin-left: 40px;
    }
  }
}

.title {
  display: flex;
  justify-content: space-between;
  padding: 0px 20px;
  margin-top: 17px;

  .left {
    font-size: 16px;
    font-weight: $font-weight-bold;
  }

;

  .right {
    color: #959CA9;

    .el-button {
      margin-left: 16px;
    }

    span {
      color: #FF8F3C;
    }
  }
}

.global-table {
  margin-top: 15px;
  padding: 0px 20px;
}

.popper-menu {
  border: 0px !important;

  .el-menu {
    padding: 0px !important;
    background-color: #008fd1 !important;

    .el-menu-item-group__title {
      padding: 0px;
    }

    .el-menu-item:hover {
      background-color: #ffffff !important;
      color: #00a0e9;
    }

    .el-menu-item.is-active {
      background-color: #ffffff !important;
    }
  }
}</style>
